<template>
  <div class="transac">
    <div class="bg-c-fff">
      <h2 class="right-title rel">法律服务订单</h2>
      <div class="right-box">
        <choose-type typename="订单状态" valuename="orderType" :itemlist="orderlist" :active="orderActive" @typechanged="onOptionChanged"></choose-type>
        <choose-type typename="交易阶段" valuename="transType" :itemlist="translist" :active="transActive" @typechanged="onOptionChanged"></choose-type>
        <table>
          <tr>
            <th>时间</th>
            <th>订单编号</th>
            <th>律师姓名</th>
            <th>合同标价</th>
            <th>交易阶段</th>
            <th>订单状态</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in list">
            <td>
              {{item.createTime}}
            </td>
            <td>{{item.id}}</td>
            <td>{{item.lawyerName}}</td>
            <td>{{item.contractPrice/100}}元</td>
            <td>{{item.status | status}}</td>
            <td>{{item.stage | stage}}</td>
            <td><a class="auto" @click="onItemClick(item)">查看详情</a></td>
          </tr>
        </table>
        <div class="no-data-tip" v-show="list.length===0">暂无相关数据</div>
        <pagination :index="index" :total="total" v-show="list.length!==0" @pagechange="getData"></pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import Calendar from '../components/Calendar'
import Pagination from '../components/Pagination'
import ChooseType from '../components/ChooseType'
export default {
  components: {
    Pagination,
    Calendar,
    ChooseType
  },
  data() {
    return {
      index: 1,
      total: 0,
      list: [],
      orderActive: '',
      orderlist: [{
        value: '',
        text: '全部'
      }, {
        value: 2,
        text: '进行中'
      }, {
        value: 1,
        text: '未支付'
      }, {
        value: 4,
        text: '已终止'
      }, {
        value: 3,
        text: '已完成'
      }],
      transActive: '',
      translist: [{
        value: '',
        text: '全部'
      }, {
        value: 1,
        text: '确认付款'
      }, {
        value: 2,
        text: '监控员绘制流程图'
      }, {
        value: 3,
        text: '法律服务监控'
      }, {
        value: 4,
        text: '服务评价'
      }, {
        value: 5,
        text: '完成评价'
      }]
    }
  },
  mounted() {
    this.getData(1)
  },
  methods: {
    onItemClick(item) {
      if (item.status === 1) {
        this.$router.push('/law-service-pay?id=' + item.id)
      }
      if (item.status === 2) {
        this.$router.push('/law-service-chart?id=' + item.id)
      }
      if (item.status === 3) {
        this.$router.push('/law-service-monitor?id=' + item.id)
      }
      if (item.status === 4) {
        this.$router.push('/law-service-evalua?id=' + item.id)
      }
      if (item.status === 5) {
        this.$router.push('/law-service-evalua?id=' + item.id)
      }
    },
    onOptionChanged(type, value) {
      if (type === 'orderType') {
        this.orderActive = value
      }
      if (type === 'transType') {
        this.transActive = value
      }
      this.getData(1)
    },
    getData(n) {
      this.$http.post('/legalService/business/read/list', {
        page: n,
        rows: 10,
        stage: this.orderActive,
        status: this.transActive
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.index = n
          this.total = Math.ceil(data.data.rows.length / 10)
          this.list = data.data.rows
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    }
  },
  filters: {
    status(v) {
      let text = ''
      let data = [{
        value: 1,
        text: '确认付款'
      }, {
        value: 2,
        text: '监控员绘制流程图'
      }, {
        value: 3,
        text: '法律服务监控'
      }, {
        value: 4,
        text: '服务评价'
      }, {
        value: 5,
        text: '完成评价'
      }]
      data.forEach(item => {
        if (v === item.value) {
          text = item.text
        }
      })
      return text
    },
    stage(v) {
      let text = ''
      let data = [{
        value: 2,
        text: '进行中'
      }, {
        value: 1,
        text: '未支付'
      }, {
        value: 4,
        text: '已终止'
      }, {
        value: 3,
        text: '已完成'
      }]
      data.forEach(item => {
        if (v === item.value) {
          text = item.text
        }
      })
      return text
    }
  }
}

</script>
<style type="text/css" scoped>
.right-box {
  padding: 40px 30px;
  color: #666666;
  line-height: 30px;
  margin-bottom: 20px;
}

table {
  margin-top: 20px;
}

table th,
table td {
  width: 132px;
}

table td a {
  width: 98px;
  height: 31px;
  display: block;
  line-height: 30px;
  background-color: #3881f2;
  color: #fff;
}

table td {
  line-height: 30px;
}

.no-data-tip {
  margin-top: 10px;
  text-align: center;
  font-size: 18px;
  color: #282828;
}

.auto {
  cursor: pointer;
}

</style>
